import React, { Component, createRef } from 'react'
import { Form, Input, Button, Space,message } from 'antd'
import {UserOutlined,LockOutlined,SafetyCertificateOutlined} from '@ant-design/icons'
import {withRouter} from 'react-router-dom';
import Cap from '../../component/Captcha'
import req from '../../http/req';
import url from '../../config/url';
class PasswdForm extends Component {
  state = {
    key: ''
  }
  capRef = createRef()
  render() {
    return (
      <Form
        name="normal_login"
        className="login-form"
        initialValues={{
          remember: true
        }}
        style={{ width: 350 }}
        onFinish={this.onFinish}
      >
        <Form.Item
          name="username"
          rules={[
            {
              required: true,
              message: '请输入用户名!'
            }
          ]}
        >
          <Input
            prefix={<UserOutlined className="site-form-item-icon" />}
            placeholder="用户名"
          />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[
            {
              required: true,
              message: '请输入密码'
            }
          ]}
        >
          <Input
            prefix={<LockOutlined className="site-form-item-icon" />}
            type="password"
            placeholder="密码"
          />
        </Form.Item>
        <Form.Item
          name="captcha"
          rules={[
            {
              required: true,
              message: '请输入验证码'
            }
          ]}
        >
          <Space size="middle">
            <Input
              prefix={
                <SafetyCertificateOutlined className="site-form-item-icon" />
              }
              type="type"
              placeholder="验证码"
            />
            <Cap h={32} ref={this.capRef} saveKey={this.saveKey} />
          </Space>
        </Form.Item>
        <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            className="login-form-button"
            block
          >
            登录
          </Button>
        </Form.Item>
      </Form>
    )
  }
  saveKey = (key) => {
    this.setState({ key })
  }
  // 登录成功的信息
  onFinish = (values) => {
    values.key = this.state.key
    // 发送请求
    req.post(url.PasswdUrl,values).then(res=>{
        console.log(res.data);
        if(res.data.errNo===0){
            // 成功
            message.success('登录成功',2,()=>this.props.history.push('/dashboard'));
        }else{
            // 失败
            message.error(res.data.errText);
        }
    })
    console.log('Received values of form: ', values)
  }
}

export default withRouter(PasswdForm)
